<template>
  <div>
    <h4>Vue Use</h4>
    <div>pos: {{ x }}, {{ y }}</div>
    <div>pos: {{ isDark }}, {{ store }} {{ pause }} {{ resume }}</div>
    <button ref="but">as</button>
    <OnClickOutside @trigger="close">
      <div>Click Outside of Me</div>
    </OnClickOutside>

    <UseMouse v-slot="{ x, y }"> x: {{ x }} y: {{ y }} </UseMouse>

    <UseDark v-slot="{ isDark, toggleDark }">
      <button @click="toggleDark()">Is Dark: {{ isDark }}</button>
    </UseDark>

    <text1></text1>

    <index1></index1>
  </div>
</template>

<script lang="ts">
import {
  useMouse,
  usePreferredDark,
  useLocalStorage,
  throttleFilter,
  debounceFilter,
  pausableFilter,
  useDeviceMotion,
  pausableWatch,
  onClickOutside,
  useTimestamp,
} from "@vueuse/core";
import { ref } from "vue";
import text1 from "./text.vue";
import { OnClickOutside, UseMouse, UseDark } from "@vueuse/components";
import index1 from "./index1.vue";
export default {
  components: {
    OnClickOutside,
    UseMouse,
    UseDark,
    text1,
    index1,
  },
  setup() {
    // tracks mouse position
    const { x, y } = useMouse();
    const but = ref();
    const timestamp = useTimestamp({ controls: true });
    console.log(timestamp, "ass");
    function close() {
      /* ... */
      console.log(but.value);
    }

    onClickOutside(but, close);
    // is user prefers dark theme
    const isDark = usePreferredDark();
    const storage = useLocalStorage(
      "my-key1",
      { foo: "bar" },
      { eventFilter: throttleFilter(8000) }
    );
    // persist state in localStorage
    const store = useLocalStorage("my-storage", {
      name: "Apple",
      color: "red",
    });
    const motionControl = pausableFilter();

    const motion = useDeviceMotion({ eventFilter: motionControl.eventFilter });
    console.log(motion);
    // motionControl.pause();

    // motion updates paused

    // motionControl.resume();
    const { pause, resume } = pausableWatch(
      () => {
        // Safely access updated DOM
      },
      { flush: "post" }
    );
    return { x, y, isDark, store, pause, resume, but };
  },
};
</script>

<style></style>
